import React, {useCallback, useState, memo} from 'react';
import {View, StyleSheet, Text, TouchableHighlight} from 'react-native';
import PatIcon from '../../base/PatIcon';
import Colors from '../../../utils/Colors';
const styles = StyleSheet.create({
  baseInfo: {
    width: '100%',
  },
  shareBox: {
    height: 30,
    backgroundColor: Colors.patBg,
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  share: {
    fontSize: 12,
    color: Colors.patFontGray,
  },
  titleBox: {
    height: 100,
    width: '100%',
    backgroundColor: Colors.white,
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    flexDirection: 'row',
  },
  titlePrice: {
    flex: 4,
    height: '100%',
  },
  title: {
    paddingLeft: 10,
    height: 50,
  },
  txt: {
    fontSize: 14,
    lineHeight: 23,
    color: Colors.patFontGray,
    overflow: 'hidden',
    textDecorationLine: 'none',
  },
  priceBox: {
    paddingLeft: 10,
    marginTop: 10,
    height: 25,
    display: 'flex',
    flexWrap: 'nowrap',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-end',
  },
  price: {
    color: Colors.patFontRed,
    fontSize: 20,
  },
  oldPrice: {
    marginLeft: 6,
    color: Colors.patFontGray2,
    fontSize: 16,
    textDecorationLine: 'line-through',
  },
  likebox: {
    flex: 1,
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  likeCount: {
    fontSize: 12,
    color: '#444',
  },
});

const BaseInfo = props => {
  const {list} = props;
  const [isLike, setIsLike] = useState(false);
  const onShare = useCallback(() => {
    console.log('分享');
  }, []);
  const onLike = useCallback(() => {
    console.log('分享');
    setIsLike(v => !v);
  }, []);
  return (
    <View style={styles.baseInfo}>
      <TouchableHighlight
        activeOpacity={1}
        underlayColor={'#ddd'}
        onPress={onShare}
        style={styles.shareBox}>
        <Text style={styles.share}>
          <PatIcon name={'share'} size={12} color={Colors.patFontGray} />
          {'  分享得1000'}
        </Text>
      </TouchableHighlight>
      <View style={styles.titleBox}>
        <View style={styles.titlePrice}>
          <View style={styles.title}>
            <Text numberOfLines={2} style={styles.txt}>
              Baby / Toddler Girl Pretty Floral Print Layered Dresses
            </Text>
          </View>
          <View style={styles.priceBox}>
            <Text style={styles.price}>{12}</Text>
            <Text style={styles.oldPrice}>{123} </Text>
          </View>
        </View>
        <View style={styles.likebox}>
          <TouchableHighlight
            activeOpacity={1}
            underlayColor={'rgab(0,0,0,0)'}
            onPress={onLike}>
            <View>
              {isLike ? (
                <PatIcon
                  name={'collect-fill'}
                  size={20}
                  color={Colors.patFontRed}
                />
              ) : (
                <PatIcon
                  name={'collect'}
                  size={20}
                  color={Colors.patFontGray}
                />
              )}
              <Text style={styles.likeCount}>323</Text>
            </View>
          </TouchableHighlight>
        </View>
      </View>
    </View>
  );
};

export default BaseInfo;
